import { Component, createContext, useContext } from "react";
import Parent from "./2-useState";

// 1. 在当前文件创建 Context（设置默认值）
export const ScenarioAnalysisContext = createContext(""); // 用于修改智能回测-回测结果-情景分析默认名字
export const FamilyContext = createContext({
  familyName: "默认家族",
  memberCount: 0,
  updateCount: (newCount: number) => {}, // 用于中定义的更新方法
});

// 2. 祖父组件（类组件）：提供 Context 数据
export default class Grandparent extends Component {
  state = {
    familyName: "张氏家族",
    memberCount: 3,
  };

  // 定义更新成员数量的方法（将传递给子组件）
  updateMemberCount = (newCount: number) => {
    this.setState({ memberCount: newCount });
  };

  render() {
    // 组装要传递的 Context 数据（包含状态和方法）
    const contextValue = {
      familyName: this.state.familyName,
      memberCount: this.state.memberCount,
      updateCount: this.updateMemberCount, // 传递方法让子组件修改数据
    };

    return (
      <div
        style={{ border: "2px solid blue", padding: "10px", margin: "10px" }}
      >
        <h3>祖父组件（类组件）</h3>
        <p>当前家族：{this.state.familyName}</p>
        {/* 用 Provider 包裹子组件，传递 contextValue */}
        <FamilyContext.Provider value={contextValue}>
          <ScenarioAnalysisContext.Provider value="当前组合">
            <Parent /> {/* 父组件作为中间层 */}
          </ScenarioAnalysisContext.Provider>
        </FamilyContext.Provider>
      </div>
    );
  }
}
